<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>大反派</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .bg {
            width: 100%;
            height:100vh;
            position: fixed;
            background-color:#333;
            
            color: #fff;
            overflow: hidden;
            position: relative;
            font-family: "微软雅黑";
        }
 .beauty{
    width: 100%;
            height:100vh;
            filter: blur(100px);
            opacity: 0.7;
 }
        .bg ul {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            padding-top: 20px;
            padding-bottom: 20px;
        }
 
        .bg ul li {
            width: 100%;
            height: 30px;
            line-height: 34px;
            text-align: center;
        }

        .bg ul li.active {
            color: #2ecc71;
            /* font-weight: bold; */
            font-size: 20px;
        }
center{
    position: fixed;
    z-index: 999;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #F1F3F4;
    justify-content: space-around;
    opacity: 0.7;
}
audio{
    width: 90%;
    
    border-radius: 0px !important;
}
.common{
    width: 40px;
    height: 40px;
    
}
.jiang{
    width: 40px;
    height: 40px;
    border-radius: 4px;
}
    </style>
</head>

<body>
    <div class="bg">
        <image class="beauty" src="./img/beauty.jpg"  lazy-load="false" binderror="" bindload="">
            
        </image>
    </div>
    <center> <div class="common songImg">
        <image class="jiang" src="./img/jiang.png">
            
        </image>
    </div> <audio src="./audio/大反派（杨和苏）.m4a" controls></audio> <div class="common songImg"></div></center>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        function parseLyric(text) {
            //按行分割歌词
            let lyricArr = text.split('\n');
            //console.log(lyricArr)//0: "[ti:七里香]" "[ar:周杰伦]"...
            let result = []; //新建一个数组存放最后结果
            //遍历分割后的歌词数组，将格式化后的时间节点，歌词填充到result数组
            for (i = 0; i < lyricArr.length; i++) {
                let playTimeArr = lyricArr[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g); //正则匹配播放时间
                let lineLyric = "";
                if (lyricArr[i].split(playTimeArr).length > 0) {
                    lineLyric = lyricArr[i].split(playTimeArr);
                }

                if (playTimeArr != null) {
                    for (let j = 0; j < playTimeArr.length; j++) {
                        let time = playTimeArr[j].substring(1, playTimeArr[j].indexOf("]")).split(":");
                        //数组填充
                        result.push({
                            time: (parseInt(time[0]) * 60 + parseFloat(time[1])).toFixed(4),
                            content: String(lineLyric).substr(1)
                        });
                    }
                }


            }
            return result;
        }


        let text = "[00:00.000] 作词 : 杨和苏KeyNG\n[00:01.000] 作曲 : 杨和苏KeyNG\n[00:12.36]Oh~~~\n[00:14.73]全都是我不对\n[00:16.20]如果得罪了谁\n[00:17.87]Oh~~~\n[00:20.19]怪我管不住嘴\n[00:21.67]有时找不着北\n[00:23.40]Oh~~~\n[00:26.22]全都是我不对\n[00:27.50]如果得罪了谁\n[00:29.19]Oh~~~\n[00:31.73]怪我管不住嘴\n[00:33.29]有时找不着北\n[00:35.23]他们从来就不喜欢我\n[00:36.55]但我喜欢你们的不喜欢\n[00:37.91]把网上的负面评论\n[00:39.43]都翻给我助理看\n[00:40.92]可我就是看不惯你跟你的脑残fans\n[00:43.78]所以我把我的韵脚都拼好再揉成了导弹bang\n[00:46.67]什么圈子不圈子的\n[00:47.80]说我偏执不现实的\n[00:49.17]我不去瓜分你们的派了\n[00:50.88]因为哥们不吃甜食\n[00:52.30]每天突破自己待在健身房里\n[00:55.37]是hip hop替我加冕\n[00:56.57]让我变成王\n[00:58.81]但这路从一开始就不好走\n[00:59.74]充满了危机和在嘴里面堆积的不自信\n[01:01.63]一个更保守的人他会调头果断逃走\n[01:03.99]但我遭受的苦让我没法咽下这口气去讨口\n[01:06.99]所以我拿笔当抢\n[01:08.24]把他们一起爆头\n[01:10.7]看我在这节奏里肆无忌惮\n[01:12.32]说我所有想说的\n[01:14.84]管你们喜不喜欢\n[01:15.34]“保持真实” 对你来说也许是想加的戏\n[01:18.20]但对我来说就是那口咽不下的气\n[01:21.24]Cuz\n[01:21.87]Oh~~~\n[01:23.95]全都是我不对\n[01:25.60]如果得罪了谁\n[01:26.68]Oh~~~\n[01:29.57]怪我管不住嘴\n[01:31.11]有时找不着北\n[01:32.68]可制造麻烦是我的使命\n[01:35.68]迟早打烂你的玻璃心\n[01:38.81]Oh~~~\n[01:41.52]他来了 他来咯\n[01:42.89]大反派要来了\n[01:46.63]Yeah\n[01:47.46]我的膝盖学不会跪下\n[01:48.75]我的舌头也学不会舔\n[01:50.54]否则的话我一定要比现在富贵点\n[01:53.8]我不会对我之前说的话而致歉\n[01:55.90]因为我的执念要比你们的票子值钱\n[01:59.53]我是认真的\n[01:59.82]所以我只认“真的”\n[02:01.31]没水平地位再高的人我也不认，真的\n[02:04.25]金钱和利益不是我对“人生的”追求\n[02:07.94]我跟你们不一样\n[02:08.41]虽然我们都是人生的\n[02:10.30]Eh Eh\n[02:10.77]我的技巧\n[02:11.32]没有必要拿去比较\n[02:11.84]把你一脚踹飞\n[02:12.95]你们都是平平坦坦的飞机场\n[02:14.73]而我是D罩杯\n[02:15.96]除了法老、AR、谢帝\n[02:17.56]别的没人能和我比\n[02:18.83]生前死后都是传奇\n[02:20.32]像我背后的科比\n[02:21.64]即便在你眼里我除了狂妄就是自大\n[02:24.64]即便我的归属是被钉死在那十字架\n[02:27.72]如果这样的话\n[02:28.96]就让我带着笑容离开吧\n[02:31.45]成为在后人口中的弥赛亚\n[02:33.45]Say\n[02:33.99]Oh~~~\n[02:36.27]全都是我不对\n[02:37.76]如果得罪了谁\n[02:39.26]Oh~~~\n[02:41.77]怪我管不住嘴\n[02:43.30]有时找不着北\n[02:45.3]可制造麻烦是我的使命\n[02:47.74]迟早打烂你的玻璃心\n[02:50.91]Oh~~~\n[02:53.65]他来了 他来咯\n[02:55.25]大反派要来了\n[02:57.19]大反派要来了\n[02:58.76](狂笑声)\n[02:59.98]Oh~~~\n[03:02.23]全都是我不对\n[03:03.69]如果得罪了谁\n[03:05.47]Oh~~~\n[03:07.91]怪我管不住嘴\n[03:09.25]有时找不着北\n[03:10.80]可制造麻烦是我的使命\n[03:14.26]迟早打烂你的玻璃心\n[03:17.11]Oh~~~\n[03:19.74]他来了 他来咯\n[03:21.64]大反派要来了\n[03:23.28]录音室：Tweak Tone Labs\n[03:23.74]混音室：@Studio21A\n[03:24.31]制作人：朴冉\n[03:24.83]监制：陈令韬\n[03:25.32]和声：张馨月、杨和苏KeyNG、曾婕Joey.Z、Doggie、刘羽晨、风笙@一棵小葱、李沛轩\n[03:25.87]混音：周天澈@Studio21A\n[03:26.39]母带：周天澈@Studio21A\n[03:26.69]录音师：郑晓桐\n[03:26.69]音频编辑：郑晓桐\n[03:26.69]Recorded at：北京\n";

        let audio = document.querySelector('audio');

        let result = parseLyric(text); //执行lyc解析


        // 把生成的数据显示到界面上去
        let $ul = $("<ul></ul>");
        for (let i = 0; i < result.length; i++) {
            let $li = $("<li></li>").text(result[i].content);
            $ul.append($li);
        }
        $(".bg").append($ul);

        let lineNo = 0; // 当前行歌词
        let preLine = 6; // 当播放6行后开始滚动歌词
        let lineHeight = -30; // 每次滚动的距离

        // 滚动播放 歌词高亮  增加类名active
        function highLight() {
            let $li = $("li");
            $li.eq(lineNo).addClass("active").siblings().removeClass("active");
            if (lineNo > preLine) {
                $ul.stop(true, true).animate({ top: (lineNo - preLine) * lineHeight });
            }
        }

        highLight();

        // 播放的时候不断渲染
        audio.addEventListener("timeupdate", function() {
            if (lineNo == result.length) return;
            if ($("li").eq(0).hasClass("active")) {
                $("ul").css("top", "0");
            }
            lineNo =getLineNo(audio.currentTime);
            highLight();
            lineNo++;
        });

        // 当快进或者倒退的时候，找到最近的后面那个result[i].time
        function getLineNo(currentTime) {
            if (currentTime >= parseFloat(result[lineNo].time)) {
                // 快进
                for (let i = result.length - 1; i >= lineNo; i--) {
                    if (currentTime >= parseFloat(result[i].time)) {
                        return i;
                    }
                }
            } else {
                // 后退
                for (let i = 0; i <= lineNo; i++) {
                    if (currentTime <= parseFloat(result[i].time)) {
                        return i - 1;
                    }
                }
            }
        }

        //播放结束自动回到开头
        audio.addEventListener("ended", function() {
            lineNo = 0;
            highLight();
            audio.play();
            $("ul").css("top", "0");
        });
    });
    </script>
</body>

</html>